<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<script type="text/ng-template" id="notebook_list_renderer.html">
  <a ng-if="note.id" href="#/notebook/{{note.id}}">{{noteName(note)}} </a>
  <li ng-if="!note.id"
      class="dropdown-submenu">
    <a tabindex="-1" href="javascript: void(0)">{{noteName(note)}}</a>
    <ul class="dropdown-menu">
      <li ng-repeat="note in note.children track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'">
      </li>
    </ul>
  </li>
</script>

<div class="navbar navbar-inverse navbar-fixed-top" style="display: none;" role="navigation" ng-class="{'displayNavBar': !asIframe}">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#/">
        <img style="margin-top: -7px;" src="assets/images/zepLogoW.png" width="50" alt="I'm zeppelin"> Zeppelin
      </a>
    </div>

    <div class="collapse navbar-collapse" ng-controller="NavCtrl as navbar">
      <ul class="nav navbar-nav" ng-if="ticket">
        <li class="dropdown" dropdown>
          <a href="#" class="dropdown-toggle" dropdown-toggle>Notebook <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="" data-toggle="modal" data-target="#noteNameModal"><i class="fa fa-plus"></i> Create new note</a></li>
            <li class="divider"></li>
            <div id="notebook-list" class="scrollbar-container">
              <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
              <li ng-repeat="note in navbar.notes.root.children |notebookFilter:query track by $index" ng-class="{'active' : navbar.isActive(note.id)}" ng-include="'notebook_list_renderer.html'"></li>
            </div>
          </ul>
        </li>
        <li>
          <a href="#/interpreter">Interpreter</a>
        </li>
        <li>
          <a href="#/credential">Credential</a>
        </li>
        <li>
          <a href="#/configuration">Configuration</a>
        </li>
      </ul>


      <ul class="nav navbar-nav navbar-right" style="margin-right:5px;">
        <li ng-if="ticket" style="margin-top:10px;">
        <!--TODO(bzz): move to Typeahead https://angular-ui.github.io/bootstrap  -->

          <form role="search" data-ng-model="searchForm"
            style="display: inline-block; margin: 0px"
             class="navbar-form"
             ng-submit="search(searchForm.searchTerm)">
            <div class="input-group">
              <input
                type="text"
                style="min-width:300px;"
                ng-model="searchForm.searchTerm"
                id="searchTermId"
                ng-disabled="!navbar.connected"
                class="form-control"
                placeholder="Search your Notebooks"
              />
              <span class="input-group-btn">
                <button
                  type="submit"
                  class="btn btn-default"
                  ng-disabled="!navbar.connected || !searchForm.searchTerm"
                >
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </span>
            </div>
          </form>
        </li>
        <li class="dropdown " dropdown="">
          <a class="dropdown-toggle" type="button" data-toggle="dropdown" href="#"
             ng-show="navbar.connected" ng-if="ticket.principal == 'anonymous' ">
            <i class="fa fa-circle server-status"
               ng-class="{'server-connected':navbar.connected, 'server-disconnected':!navbar.connected}"></i>
            Connected
            <span class="caret"></span>
          </a>
          <a class="dropdown-toggle" type="button" data-toggle="dropdown" href="#"
             ng-show="navbar.connected" ng-if="ticket.principal != 'anonymous' "
             tooltip-placement="bottom" tooltip="{{fullUsername}}">
            <i class="fa fa-circle server-status"
               ng-class="{'server-connected':navbar.connected, 'server-disconnected':!navbar.connected}"></i>
            {{truncatedUsername}}
            <span class="caret"></span></a>
          <a class="dropdown-toggle" type="button" data-toggle="dropdown" href="#"
             ng-show="!navbar.connected">
            <i class="fa fa-circle server-status"
               ng-class="{'server-connected':navbar.connected, 'server-disconnected':!navbar.connected}"></i>
            Disconnected
            <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="" data-toggle="modal" data-target="#aboutModal">
              <i style="font-size: 15px;" class="fa fa-info"></i> About</a></li>
            <li ng-show="ticket.principal && ticket.principal!='anonymous'" style="left: 5px;">
              <a ng-click="logout()">Logout</a>
            </li>
          </ul>
        </li>
        <li ng-if="!ticket">
          <button class="btn btn-default" data-toggle="modal" data-target="#loginModal"
                  ng-click="showLoginWindow()" style="margin-top: 8px">Login
          </button>
        </li>

      </ul>
    </div>
  </div>
</div>
<div id="aboutModal" class="modal fade" role="dialog"
     tabindex='-1'>
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content" id="NoteImportCtrl" ng-init="NoteImportInit">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">About Zeppelin</h4>
      </div>
      <div class="modal-body">

        <div class="about">
          <div class="logo">
            <img src="assets/images/zepLogo.png" alt="Apache Zeppelin" title="Apache Zeppelin">
          </div>
          <div class="content">
            <h3>Apache Zeppelin</h3>
            <br>
            <span id="i18n-14">Version</span>
            {{zeppelinVersion}}
            <br>
            <br>
            <a href="http://zeppelin.apache.org/" target="_blank"><span id="i18n-15">Get involved!</span></a>
            <br>
            <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank"><span id="i18n-16">Licensed under the Apache License, Version 2.0</span></a>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
